<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05jQuery选择器</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 1、基本选择器
            // #ID 选择器：根据 id 查找标签对象
            // .class 选择器：根据 class 查找标签对象
            // element 选择器：根据标签名查找标签对象
            // * 选择器：表示任意的，所有的元素
            // selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

            // 1.1~1.3
            // alert($("#title")[0]);   // [object HTMLHeadingElement]
            // alert($(".title")[0]);   // [object HTMLHeadingElement]
            // alert($("h1")[0]);       // [object HTMLHeadingElement]

            // (数组顺序为页面元素的顺序，而不是参数顺序)
            // alert($("div")[0]);     // [object HTMLDivElement]
            // alert($("div")[1]);     // [object HTMLDivElement]
            // alert($("div")[3]);     // [undefined]

            // 1.4 * 选择器(数组顺序为页面元素的顺序，而不是参数顺序)
            // alert($("*")[0]);        // [object HTMLHtmlElement]
            // alert($("*")[1]);        // [object HTMLHeadingElement]
            // alert($("*")[2]);        // [object HTMLMetaElement]
            // alert($("*")[3]);        // [object HTMLTitleElement]
            // alert($("*")[4]);        // [object HTMLScriptElement]

            // 1.5 组合选择器(数组顺序为页面元素的顺序，而不是参数顺序)
            // alert($("h1.title,a,button")[0]);        // [object HTMLHeadingElement]
            // alert($("h1.title,a,button")[1]);        // [object HTMLButtonElement]
            // alert($("h1.title,a,button")[2]);        // [object HTMLButtonElement]
            // alert($("h1.title,a,button")[3]);        // https://www.baidu.com/

            // 2、层级选择器（****重点）
            // 2.1 【多代】ancestor descendant  在给定的祖先元素下匹配所有的后代元素,包括孙子
            // console.log($("div p")[0]);  // <p>第一段</p>
            // console.log($("div p")[1]);  // <p>第二段</p>
            // console.log($("div p")[2]);  // <p>第三段</p>
            // 2.2 【隔代】parent > child       在给定的父元素下匹配所有的子元素,不包括孙子
            // console.log($("div > p")[0]);  // <p>第一段</p>
            // console.log($("div > p")[1]);  // <p>第二段</p>
            // console.log($("div > p")[2]);  // undefined

            // 2.3 【平辈儿】prev + next        匹配所有紧接在 prev 元素后的 next 元素
            // console.log($(".title + button")[0]);  // <button>button1</button>
            // console.log($(".title + button")[1]);  // undefined

            // 2.4 【平辈儿】prev ~ siblings    匹配 prev 元素之后的所有 siblings 元素
            console.log($(".title ~ button")[0]);  // <button>button1</button>
            console.log($(".title ~ button")[1]);  // <button>button2</button>
            console.log($(".title ~ button")[2]);  // undefined

        });
    </script>
</head>
<body>
<div>
    <h1 id="title" class="title">一级标题</h1>
    <button>button1</button>
    <button>button2</button>
    <a href="https://www.baidu.com">百度</a>
    <div>
        <button>button3</button>
        <p>第一段</p>
        <p>第二段</p>
        <strong><p>第三段</p></strong>
    </div>
</div>
</body>
</html>